<!DOCTYPE html>
<html lang="en-us" id="extr-page">
	<head>
		<meta charset="utf-8">
		<title> SmartAdmin (AJAX)</title>
		<meta name="description" content="">
		<meta name="author" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		
		<!-- #CSS Links -->
		<!-- Basic Styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" media="screen" href="css/font-awesome.min.css">

		<!-- SmartAdmin Styles : Caution! DO NOT change the order -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-production-plugins.min.css">
		<link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-production.min.css">
		<link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-skins.min.css">

		<!-- SmartAdmin RTL Support -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-rtl.min.css"> 

		<!-- We recommend you use "your_style.css" to override SmartAdmin
		     specific styles this will also ensure you retrain your customization with each SmartAdmin update.
		<link rel="stylesheet" type="text/css" media="screen" href="css/your_style.css"> -->

		<!-- Demo purpose only: goes with demo.js, you can delete this css when designing your own WebApp -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/demo.min.css">
	
		<!-- Sweet Alert -->
		<link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

		<!-- Ladda style -->
		<link href="css/plugins/ladda/ladda-themeless.min.css" rel="stylesheet">

		<!-- #FAVICONS -->
		<link rel="shortcut icon" href="img/favicon/favicon.ico" type="image/x-icon">
		<link rel="icon" href="img/favicon/favicon.ico" type="image/x-icon">
		<script>
			
			function GetQueryString(name){
				 var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
				 var r = window.location.hash.substr(1).match(reg);
				 if(r!=null)return  unescape(r[2]); return "";
			}
			
			function gotoreg(){
				window.location.href = "login.html#from=" + encodeURI(GetQueryString('from'));
			}
		</script>

	</head>
	<body id="login">
		<!-- possible classes: minified, no-right-panel, fixed-ribbon, fixed-header, fixed-width-->
		<header id="header">
			<!--<span id="logo"></span>-->

			<div id="logo-group">
				<span id="logo"> <img src="img/logo.png" alt="智慧公交"> </span>

				<!-- END AJAX-DROPDOWN -->
			</div>

			<span id="extr-page-header-space"> <span class="hidden-mobile hidden-xs">已注册?</span> <button onclick="gotoreg" class="btn btn-danger">即刻登陆</button> </span>

		</header>

		<div id="main" role="main">

			<!-- MAIN CONTENT -->
			<div id="content" class="container">

				<div class="row">
					<div class="col-xs-12 col-sm-12 col-md-7 col-lg-7 hidden-xs hidden-sm">
						<h1 class="txt-color-red login-header-big">智慧公交</h1>
						<div class="hero">

							<div class="pull-left login-desc-box-l">
								<h4 class="paragraph-header">智能的公交出行助手，现已支持济南</h4>
								<div class="login-app-icons">
									<a href="javascript:void(0);" class="btn btn-danger btn-sm">在线试用</a>
									<a href="javascript:void(0);" class="btn btn-danger btn-sm">下载应用</a>
								</div>
							</div>
							
							<img src="img/demo/iphoneview.png" alt="" class="pull-right display-image" style="width:210px">
							
						</div>
						<div class="row">
							<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
								<h5 class="about-heading">全新公交出行体验</h5>
								<p>
									我们拥有包括桌面浏览器、Android APP、iOS APP、手机H5网页、微信公众号、微信小程序、支付宝生活号在内的各类入口，方便快捷。
								</p>
							</div>
							<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
								<h5 class="about-heading">全新的界面交互</h5>
								<p>
									不拘传统，全新的交互和流畅动画给您轻松地公交出行体验
								</p>
							</div>
						</div>

					</div>
					<div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
						<div class="well no-padding">

							<form class="smart-form client-form" id="smart-form-register">
								<header>
									注册
								</header>

								<fieldset>
									<div class="row" style="margin:0 0 0 -15px">
										<section class="col col-8">
											<label class="input"> <i class="icon-append fa fa-phone"></i>
												<input type="number" name="phone" placeholder="手机号" id="phone">
												<b class="tooltip tooltip-bottom-right">只支持中国大陆11位手机号</b> </label>
										</section>
										<a class='btn btn-default btn-sm col col-4 sendPhoneCode'>发送验证码</a>
									</div>
									<section>
										<label class="input"> <i class="icon-append fa fa-code"></i>
											<input type="number" name="code" placeholder="短信验证码" id="code">
											<b class="tooltip tooltip-bottom-right">请输入接受到的短信验证码</b> </label>
									</section>
									<section>
										<label class="input"> <i class="icon-append fa fa-lock"></i>
											<input type="password" name="password" placeholder="密码" id="password">
											<b class="tooltip tooltip-bottom-right">只能输入6位以上字母或数字</b> </label>
									</section>

									<section>
										<label class="input"> <i class="icon-append fa fa-lock"></i>
											<input type="password" name="passwordConfirm" placeholder="确认密码">
											<b class="tooltip tooltip-bottom-right">只能输入6位以上字母或数字</b> </label>
									</section>
								</fieldset>
								<fieldset>
									<section>
										<label class="input"> <i class="icon-append fa fa-user"></i>
											<input type="text" name="name" placeholder="用户名">
											<b class="tooltip tooltip-bottom-right">支持中文，一旦设置将不可更改</b> </label>
									</section>

									<section>
										<label class="input"> <i class="icon-append fa fa-envelope"></i>
											<input type="email" name="email" placeholder="邮箱">
											<b class="tooltip tooltip-bottom-right">接收推送、手机号换绑、找回密码使用</b> </label>
									</section>
									<section>
										<label class="checkbox">
											<input type="checkbox" name="subscription" id="subscription">
											<i></i>我愿接收推送（如：改线通知、线路开辟等）</label>
										<label class="checkbox">
											<input type="checkbox" name="terms" id="terms">
											<i></i>我同意 <a href="#" data-toggle="modal" data-target="#myModal"> 服务协议声明 </a></label>
									</section>
								</fieldset>
								<input type='hidden' name='mothed' value='regUser'/>
								<footer>
									<button type="submit" class="btn btn-primary">
										即刻注册
									</button>
								</footer>

								<div class="message">
									<i class="fa fa-check"></i>
									<p>
										感谢您的支持，公交出行助手已就绪
									</p>
								</div>
							</form>

						</div>
						<!--
						<h5 class="text-center">- Or sign in using -</h5>
						<ul class="list-inline text-center">
							<li>
								<a href="javascript:void(0);" class="btn btn-primary btn-circle"><i class="fa fa-facebook"></i></a>
							</li>
							<li>
								<a href="javascript:void(0);" class="btn btn-info btn-circle"><i class="fa fa-twitter"></i></a>
							</li>
							<li>
								<a href="javascript:void(0);" class="btn btn-warning btn-circle"><i class="fa fa-linkedin"></i></a>
							</li>
						</ul>
						-->
					</div>
				</div>
			</div>

		</div>

		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">服务协议声明</h4>
					</div>
					<div class="modal-body custom-scroll terms-body">
						<div id="left">
							<h2>智慧公交提醒您：</h2>
							<p>在使用智慧公交前，请您务必仔细阅读并透彻理解本声明。您可以选择不使用智慧公交，但如果您使用智慧公交，您的使用行为将被视为对本声明全部内容的认可。条款如果更改，系统会再次征求您的同意</p>
							<ul>
								<li>任何通过使用智慧公交搜索显示的第三方信息均系他人制作或提供，您可能从该第三方数据来源上获得资讯，智慧公交对其合法性概不负责，亦不承担任何法律责任。</li>
								<li>一切因使用智慧公交而可能导致之任何意外、疏忽、违约、名誉或商誉诽谤、版权、知识产权或其他任何权利侵犯及其所造成的任何损失(包括但不限于因任何方式的下载而感染电脑病毒)，智慧公交对其概不负责，亦不承担任何法律责任。</li>
								<li>您应该对使用搜索路线的结果自行承担风险，路径规划由高德提供并且存在人工修正的特殊情况。智慧公交不做任何形式的保证：不保证线路规划足您的要求，不保证线路规划不中断，不保证线路规划的安全性、正确性、及时性、合法性。因网络状况、通讯线路、第三方网站等任何原因而导致您不能正常使用智慧公交，智慧公交不承担任何法律责任。</li>
								<li>智慧公交尊重并保护所有使用智慧公交用户的个人隐私权，您注册的用户名、电子邮件地址、手机号码等个人资料，非经您亲自许可或根据相关法律、法规的强制性规定，智慧公交不会主动地泄露给第三方。智慧公交提醒您：您在使用搜索功能时输入地理位置是隐私，智慧公交会保存用于大数据分析以及车辆轨迹校准。</li>
								<li>任何路线或站点如果不想被智慧公交收录（即不被定位），应该及时向智慧公交反映否则，智慧公交将依照惯例视其为可收录的路线或站点。</li>
								<li>任何单位或个人认为通过智慧公交搜索到的路线内容可能是不正确的，作为使用者您有责任及时向智慧公交提出指正错误，并提供情况证明。智慧公交在收到上述消息后，将会尽快修正错误内容。</li>
								<li>任何单位或个人认为通过智慧公交搜索到的第三方内容可能涉嫌侵犯其信息网络传播权，应及时向我们提出书面权利通知，并提供身份证明、权属证明及详细情况证明。我们在收到上述法律文件后，将依法尽快停止对相关内容的收录。</li>
							</ul>
							<h2>智慧公交隐私保护声明</h2>
							<p>智慧公交非常重视用户信息的保护，在使用智慧公交的所有产品和服务前，请您务必仔细阅读并透彻理解本声明。一旦您选择使用，即表示您认可并接受本条款现有内容及其可能随时更新的内容。</p>
							<h3>一、信息收集</h3>
							<p>您向智慧公交提供的信息。为了向您提供更好的用户服务,智慧公交会在您自愿选择服务或提供信息的情况下系统自动存储注册信息。请您在注册时及时、详尽及准确的提供个人资料，并不断更新注册资料。所有原始键入的资料将引用为注册资料。如果因注册信息不真实而引起的问题，由您自行承担相应的后果。请您不要将您的帐号、密码转让或出借予他人使用。如您发现您的帐号遭他人非法使用，应立即通知智慧公交。互联网上不排除因黑客行为或用户的保管疏忽导致帐号、密码遭他人非法使用，此类情况与智慧公交无关。</p>
							<h3>二、因您使用产品或服务获取的信息</h3>
							<ul>
								<li>1. 日志信息。当您使用智慧公交服务时，服务器会自动记录一些信息，例如地理位置、IP地址、所访问服务的URL、浏览器的类型和使用的语言以及访问日期和时间等。</li>
								<li>2. 设备信息。某些产品和/或服务包含唯一应用程序编号。当您安装、激活、更新、卸载相关服务或当这些服务定期与智慧公交通信（例如软件的更新）时，系统会将此编号以及与安装相关的信息（例如操作系统类型和应用程序版本号）发送给智慧公交。当您使用具有定位功能的智慧公交服务时，系统会自动处理有关设备的位置信息，以使得您不需要手动输入自身地理坐标就可获得相关服务。例如在智慧公交定位服务中，如果您使用“当前位置”进行地理查询，智慧公交可能会向您提供基于位置的服务。</li>
								<li>3. Cookie信息。运用cookie技术，智慧公交能够为您提供更加周到的个性化服务，并允许您设定您特定的服务选项。不能拒绝智慧公交使用cookie，如果您选择拒绝cookie，则您可能无法登录或使用依赖于cookie的智慧公交服务或功能。</li>
								<li>4. 以上数据信息都采用不记名的方式。同时，我们也会对信息采取加密处理，保证信息的安全性。</li>
							</ul>
							<h3>三、信息使用</h3>
							<ul>
								<li>1. 通过使用收集的信息，例如: 点击次数、使用时长、使用地点等。智慧公交得以向您提供个性化的服务，例如向您展现相关程度更高的搜索结果。上述信息还可以帮助智慧公交改进智慧公交的产品或服务，并用于开发新的产品或服务。</li>
								<li>2. 智慧公交会以高度的勤勉义务对待这些信息，除非事先获得您的授权或本声明另有规定外，不会将这些信息对外公开或向第三方提供。</li>
								<li>3. 任何由于黑客攻击、计算机病毒侵人或发作、因政府管制而造成的暂时性关闭等影响网络正常经营的 不可抗力而造成的个人资料泄露、丢失、被盗用或被窜改等，智慧公交不负任何责任。</li>
								<li>4.智慧公交可能会对产品使用情况进行统计。同时，智慧公交可能会与公众分享这些统计信息，以展示我们服务的整体使用趋势。这些统计信息可能会包含您的身份信息。</li>
								<li>5. 在如下情况下，智慧公交可能会披露您的信息：<br>（1）事先获得您的授权；<br>（2）您使用共享功能；<br>（3）根据法律、法规、法律程序的要求或政府主管部门的强制性要求；<br>（4）以学术研究或公共利益为目的；<br>（5）为维护智慧公交的合法权益，例如查找、预防、处理欺诈或安全方面的问题；<br>（6）符合相关服务条款或使用协议的规定。</li>
							</ul>
							<h3>四、信息安全</h3>
							<p>智慧公交非常重视信息安全，智慧公交努力保护您的信息不被未经授权的访问、使用或泄漏。</p>
							<h3>五、未成年人信息保护</h3>
							<p>智慧公交非常重视对未成年人信息的保护。若您是18周岁以下的未成年人，在使用智慧公交的产品和服务前，应事先取得您的家长或法定监护人的同意。假若使用者走丢责任由使用者自负，我们不会向任何人提供任何用户的运动轨迹。</p>
							<h3>六、修订</h3>
							<p>智慧公交随时会对本隐私权保护声明进行修订。智慧公交会在网页中显著的位置予以发布。</p>
							<br><br><br>
							<p>如果您还有其他问题和建议，请联系智慧公交[help@tuancloud.cn]。智慧公交会始终致力于充分保护用户信息，并为您提供更优质的体验和服务。</p>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="i-agree"><i class="fa fa-check"></i>我同意</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		<div class="modal fade" id="yzmModal" tabindex="-1" role="dialog" aria-labelledby="yzmModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="yzmModalLabel">需填写图形验证码</h4>
					</div>
					<div class="modal-body">
						<img src="#" id = "yzm"/>
						<div class="form-group">
							<input type="text" class="form-control" placeholder="请填写图形验证码" required="" id="validate">
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary sendPhoneCode"  data-dismiss="modal">发送验证码</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
		<!--================================================== -->	


		<!-- PACE LOADER - turn this on if you want ajax loading to show (caution: uses lots of memory on iDevices)-->
		<script src="js/plugin/pace/pace.min.js"></script>

		<script src="js/libs/jquery-2.1.1.min.js"></script>
		<script src="js/libs/jquery-ui-1.10.3.min.js"></script>

		<!-- IMPORTANT: APP CONFIG -->
		<script src="js/app.config.js"></script>

		<!-- JS TOUCH : include this plugin for mobile drag / drop touch events 		
		<script src="js/plugin/jquery-touch/jquery.ui.touch-punch.min.js"></script> -->

		<!-- BOOTSTRAP JS -->		
		<script src="js/bootstrap/bootstrap.min.js"></script>

		<!-- JQUERY VALIDATE -->
		<script src="js/plugin/jquery-validate/jquery.validate.min.js"></script>
		<script src="js/plugin/jquery-validate/localization/messages_zh.js"></script>
		
		<!-- JQUERY MASKED INPUT -->
		<script src="js/plugin/masked-input/jquery.maskedinput.min.js"></script>
		
		<!--[if IE 8]>
			
			<h1>Your browser is out of date, please update your browser by going to www.microsoft.com/download</h1>
			
		<![endif]-->
		<!-- Ladda -->
		<script src="js/plugin/ladda/spin.min.js"></script>
		<script src="js/plugin/ladda/ladda.min.js"></script>
		<script src="js/plugin/ladda/ladda.jquery.min.js"></script>

		<!-- Sweet alert -->
		<script src="js/plugin/sweetalert/sweetalert.min.js"></script>
		

		<!-- MAIN APP JS FILE -->
		<script src="js/app.min.js"></script>

		<script type="text/javascript">

			// Model i agree button
			$("#i-agree").click(function(){
				$this=$("#terms");
				if($this.checked) {
					$('#myModal').modal('toggle');
				} else {
					$this.prop('checked', true);
					$('#myModal').modal('toggle');
				}
			});
			
			$('#yzm').click(function(){
				$('#yzm')[0].src = '//api.waitbus.com/v3/captcha.php?rand=' + Math.random();
			});
			
			$(".sendPhoneCode").click(function(){
				var mobile = /^1[3-8][0-9]{9}$/;
				var phone = $('#phone').val();
				if(mobile.test(phone)){
					$('#yzmModal').modal('hide');
					$.ajax({
						type: "GET",
						url:"//api.waitbus.com/v3/?mothed=sendRegSMS&phone=" + phone + "&validate=" + $('#validate').val(),
						dataType: "json", 
						async: false,
						error: function(request) {
							swal("网络异常", "请检查网络连接，也可能是服务器暂时故障", "error");
						},
						success: function(data) {
							$('#validate').val('');
							if(data.status.code<0){
								if(data.status.code==-5||data.status.code==-6){
									$('#yzmModal').modal('show');
									$('#yzm').click();
									$('#yzmModalLabel').text(data.status.msg);
								}else{
									swal("出现异常", data.status.msg, "error");
								}
							}else{
								runAllForms();
								swal("发送成功", "一分钟后可重新发送", "success");

								$("#smart-form-register").validate({
									rules : {
										code : {required : true,range:[100000,999999],digits:true},
										name : {minlength : 3},
										email : {email : true},
										password : {required : true,minlength : 6},
										passwordConfirm : {required : true,equalTo : '#password'},
										terms : {required : true}
									},
									messages : {
										terms : {required : '若要使用智慧公交的服务，您务必同意协议'}
									},
									submitHandler: function(form){      
										$.ajax({
											type: "GET",
											url:"/v3/",
											data:$('#smart-form-register').serialize(),// 你的formid
											dataType: "json", 
											async: false,
											error: function(request) {
												swal("网络异常", "请检查网络连接，也可能是服务器暂时故障", "error");
											},
											success: function(data) {
												console.log(data);
												if(data.status.code<0){
													swal("出现错误",data.status.msg + "[ERROR CODE:" +data.status.code + "]", "error");
												}else{
													swal("注册成功", "正在前往注册前页面，请稍后……", "success");
													localStorage.account=$('#phone').val();
													location.href = GetQueryString('from');
												}
											}
										});	
									},
									errorPlacement : function(error, element) {
										error.insertAfter(element.parent());
									}
								});				
							}
						}
					});	
				

				}else{
					swal("填写异常", "手机号格式不符", "error");
				}
			});
			
		</script>

	</body>
</html>